<!--# layout("/common/layout.html",{"jsBase":"/js/product/saleProduct/"}){ -->
 <style type="text/css">
    .uploader-list {
        margin-left: -15px;
    }

    .uploader-list .info {
        position: relative;
        margin-top: -25px;
        background-color: black;
        color: white;
        filter: alpha(Opacity=80);
        -moz-opacity: 0.5;
        opacity: 0.5;
        width: 100px;
        height: 25px;
        text-align: center;
        display: none;
    }

    .uploader-list .handle {
        position: relative;
        background-color: black;
        color: white;
        filter: alpha(Opacity=80);
        -moz-opacity: 0.5;
        opacity: 0.5;
        width: 100px;
        text-align: right;
        height: 18px;
        margin-bottom: -18px;
        display: none;
    }

    .uploader-list .handle span {
        margin-right: 10px;
    }

    .uploader-list .handle span:hover {
        cursor: pointer;
    }

    .uploader-list .file-iteme {
        margin: 12px 0 0 15px;
        padding: 1px;
        float: left;
    }
</style>
<form class="layui-form layui-form-pane" id="addForm" enctype="multipart/form-data"  lay-filter="editform">
    <input type="hidden" name="productId" id="productId">

    <div class="layui-row">
        <div class="layui-form-item">
            <div class="layui-inline">
            <label class="layui-form-label">商品类型</label>
				<div class="layui-input-inline">
                    <select style="width:40%" class="select" name="productType" id="productType"  promtion="请选择类型" lay-verify="required" lay-filter="typeselect">
                        <option value="">请选择类型</option>
                        <option value="985">高考作文及提分</option>
                        <option value="411">纸质书</option>
                        <option value="996">课程</option>
                        <option value="997">商品</option>
                    </select>
				</div>
            </div>
            <div class="layui-inline">
            <label class="layui-form-label">商品名称</label>
				<div class="layui-input-inline">
                                <input type="text" name="productName" id="productName" autocomplete="off" maxlength="50" class="layui-input" lay-verify="required">
				</div>
            </div>

        </div>
    </div>

    <div class="layui-row">
        <div class="layui-form-item">

            <div class="layui-inline">
            <label class="layui-form-label">商品价格</label>
				<div class="layui-input-inline">
                       <input type="text" name="productPrice" id="productPrice" autocomplete="off" maxlength="50" class="layui-input" lay-verify="required|number">
				</div>
            </div>

            <div class="layui-inline">
                <label class="layui-form-label">商品原价</label>
                <div class="layui-input-inline">
                    <input type="text" name="costPrice" id="costPrice" autocomplete="off" maxlength="50" class="layui-input">
                </div>
            </div>



        </div>
    </div>
    <div class="layui-row">
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">商品库存</label>
                <div class="layui-input-inline">
                    <input type="text" name="inventory" id="inventory" autocomplete="off" maxlength="50" class="layui-input" lay-verify="required|number">
                </div>
            </div>

            <div class="layui-inline">
                <label class="layui-form-label" style="width: 120px">商品已售基数</label>
                <div class="layui-input-inline">
                    <input type="text" name="baseSales" id="baseSales" autocomplete="off" maxlength="50" class="layui-input" lay-verify="required|number">
                </div>
            </div>
        </div>
    </div>

    <div class="layui-row">
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">邮费(分)</label>
                <div class="layui-input-inline">
                    <input type="text" name="postage" id="postage" autocomplete="off" maxlength="50" class="layui-input" lay-verify="required|number">
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label">可用标记</label>
                <div class="layui-input-inline">
                    <input type="radio" name="productStatus" checked value="1" title="是">
                    <input type="radio" name="productStatus"  value="0" title="否">
                </div>
            </div>
        </div>
    </div>
    <div class="layui-row" id="bookIdsDiv" hidden >
        <div class="layui-form-item">
            <div class="layui-input-inline">
                <label class="layui-form-label">关联书籍</label>
                <div class="layui-input-block" style="width:512px" id="modulecMember"></div>
            </div>
        </div>
    </div>
    <div class="layui-row">
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">发货地址</label>
                <div class="layui-input-inline">
                    <input type="text" class="layui-input" name="consignAddress" id="consignAddress" style="width: 300px"/>
                </div>
            </div>
        </div>
    </div>
    <div class="layui-row">
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">商品描述</label>
                <div class="layui-input-block" style="width:800px;z-index: 888">
                    <div id="wxin-contentDesc" ></div>
                    <input type="hidden" name="productDesc" id="productDesc"/>
                </div>
            </div>
        </div>
    </div>

    <div class="layui-row" >
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">备注</label>
                <div class="layui-input-block" style="width:512px">
                    <textarea name="productMemo"  id="productMemo" placeholder="请输入" class="layui-textarea" ></textarea>
                </div>
            </div>
        </div>
    </div>

    <layui:image id="cover" tagName="商品主图" tips=""/>

    <div class="layui-row">
        <div class="layui-form-item">
            <div class="layui-upload">
                <label class="layui-form-label" style="width: 120px">商品图片集合</label>
                <button type="button" class="layui-btn" id="test2">多图片上传</button>
                <!-- <blockquote class="layui-elem-quote layui-quote-nm" style="margin-top: 10px;">-->

                <!-- <div class="layui-upload-list" id="demo2"></div>-->
                <blockquote class="layui-elem-quote layui-quote-nm" style="margin-top: 10px;width: 650px;">
                    <div class="layui-upload-list uploader-list" style="overflow: auto;" id="uploader-list">

                    </div>
                </blockquote>
                <input type="hidden" name="introImg" id="introImg">
            </div>
        </div>
    </div>

    <layui:submitButtons id="addButton" />
</form>
<!--#} -->
<script type="text/javascript"  src="${ctxPath}/plugins/ueditor/ueditor.config.js"></script>
<script type="text/javascript"  src="${ctxPath}/plugins/ueditor/ueditor.all.js"></script>
<script>

    $(document).on("mouseenter mouseleave", ".file-iteme", function(event){
        if(event.type === "mouseenter"){
            //鼠标悬浮
            $(this).children(".info").fadeIn("fast");
            $(this).children(".handle").fadeIn("fast");
        }else if(event.type === "mouseleave") {
            //鼠标离开
            $(this).children(".info").hide();
            $(this).children(".handle").hide();
        }
    });
    // 删除图片
    $(document).on("click", ".file-iteme .handle", function(event){
        $(this).parent().remove();
        var lectureImgs ="";
        $("#uploader-list img").each(function(){
            var img = $(this).attr("src");
            if(img!=null&&img!=""){
                lectureImgs += img+"@";
            }
        });
        $("#introImg").val(lectureImgs.substr(0,lectureImgs.length-1));
    });

    let ueditor_config = {
        toolbars: [["undo", "redo", "|", "fontsize", "forecolor", "bold", "italic", "underline", "|", "justifyleft", "justifycenter", "justifyright", "justifyjustify", "lineheight", "|", "directionalityltr", "directionalityrtl", "indent", "|", "simpleupload", "|",  "spechars", "source", "|", "searchreplace", "|", "fullscreen","mobile"]],
        serverUrl: "${ctxPath}/upload/config",
        autoHeightEnabled: false,
        elementPathEnabled : false,　　//是否启用元素路径，默认是true显示
        wordCount:false,          //是否开启字数统计
        initialFrameHeight:500
    };
    var ue = UE.getEditor('wxin-contentDesc',ueditor_config);

    ue.ready(function() {

    });

    UE.Editor.prototype._bkGetActionUrl = UE.Editor.prototype.getActionUrl;
    UE.Editor.prototype.getActionUrl = function(action) {
        if (action == 'uploadimage' || action == 'uploadscrawl' || action == 'uploadvideo') {
            return '${ctxPath}/upload/uploadImg.json';
        } else {
            return this._bkGetActionUrl.call(this, action);
        }
    }

    // 编辑
    setTimeout(function () {
        var bjcontentDesc=  document.getElementById("productDesc").value;
        UE.getEditor('wxin-contentDesc').setContent(bjcontentDesc);
    },1000);

    Common.initImage();
layui.extend({
    loading: '../../../plugins/layui_extends/loading/loading',
    selectM: '../../../plugins/layui_extends/selectM',
}).define([ 'form', 'laydate', 'table','loading','saleProductApi','selectM','upload'], function(exports) {
    var form = layui.form;
    var saleProductApi = layui.saleProductApi;
    var index = layui.index;
    var isNew = true;
    var upload = layui.upload;
    var selectM = layui.selectM;
    var tagData = ${ebookJson};
    <!--# if(!(isEmpty(saleProductJson))){  -->
    isNew = false;
    var imgs = "${saleProduct.introImg}";
    if(imgs!=null&&imgs!=""&&imgs!=","){
        var arr = imgs.split("@");
        for ( var i = 0; i <arr.length; i++){
            $('#uploader-list').append(
                '<div id="" class="file-iteme">' +
                '<div class="handle"><span class="layui-icon layui-icon-delete"></span></div>' +
                '<img style="width: 100px;height: 100px;" src='+ arr[i] +'>' +
                '</div>'
            );
        }
    }
    <!--# } -->
    var view = {
        init:function(){
            Lib.initGenrealForm($("#addForm"),form);
            var tagIns2 = selectM({
                //元素容器【必填】
                elem: '#modulecMember'
                //候选数据【必填】
                ,data: tagData
                //默认值
                ,selected: [${saleProduct.bookIds!}]
                //最多选中个数，默认5
                ,max : 5
                //input的name 不设置与选择器相同(去#.)
                ,name: 'bookIds'
                //值的分隔符
                ,delimiter: ','
                //候选项数据的键名
                ,field: {idName:'bookId',titleName:'bookName'}
            });

            //多图片上传
            upload.render({
                elem: '#test2'
                ,url: '${ctxPath}/upload/uploadImg.json'
                ,multiple: true
                ,before: function(obj){
                    //预读本地文件示例，不支持ie8
                    // obj.preview(function(index, file, result){
                    //
                    //     $('#demo2').append('<img src="'+ result +'" alt="'+ file.name +'" class="layui-upload-img">')
                    //
                    // });
                }
                ,done: function(res){
                    //上传完毕
                    if(res.state=='SUCCESS'){

                        $('#uploader-list').append(
                            '<div id="" class="file-iteme">' +
                            '<div class="handle"><span class="layui-icon layui-icon-delete"></span></div>' +
                            '<img style="width: 100px;height: 100px;" src='+ res.url +'>' +
                            '</div>'
                        );

                        var lectureImgs = $("#introImg").val();
                        if(lectureImgs=="@"){
                            document.getElementById("introImg").value="";
                            lectureImgs = $("#introImg").val();
                        }

                        if(!lectureImgs){
                            lectureImgs += res.url;
                        }else{
                            lectureImgs += "@"+res.url;
                        }
                        $("#introImg").val(lectureImgs);
                    }
                }
            });
            this.initSubmit();
        },
        initSubmit:function(){
            $("#addButton").click(function(){
                // $("#addButton").hide();
                // $("#addButton-loading").show();
                // $("#addButton-loading").loading();
                $("#productDesc").val(ue.getContent());
                form.on('submit(form)', function(){
                    saleProductApi.saveForm(isNew,$('#addForm'),function(){
                        parent.window.dataReload();
                        Common.info("保存成功");
                        Lib.closeFrame();
                    });
                });
            });

            $("#addButton-cancel").click(function(){
                Lib.closeFrame();
            });
        }

    }
    view.init();
    form.on('select(typeselect)', function(data){
        if(data.value ==996){
            $("#bookIdsDiv").show();
        }else{
            $("#bookIdsDiv").hide();
        }
    });
    <!--# if(!(isEmpty(saleProductJson))){  -->
    var formJson = ${saleProductJson};
    ue.execCommand('insertHtml', formJson.productDesc);
    if(formJson.productType==996){
        $("#bookIdsDiv").show();
    }
    form.val("editform",formJson);
    $(".image-preview").each(function() {
        $(this).attr("src",formJson[$(this).attr("id")]);
    });
    <!--# } -->
});
</script>
